<template>
  <div class="flex-container3">
    <div class="title-row">
      <h1 class="title">活动类型</h1>
    </div>

    <div class="content-row">
      <div class="c1">
        <dv-decoration-9 style="width: 150px; height: 150px">
          <div class="font1">20%</div>
        </dv-decoration-9>
        <h1 class="title">活动 计划</h1>
      </div>

      <div class="c1">
        <dv-decoration-9 style="width: 150px; height: 150px">
          <div class="font1">
            <div class="font2">0%</div>
          </div>
        </dv-decoration-9>
        <h1 class="title">活动 进展</h1>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-container3 {
  display: flex;
  flex-direction: column; /* 设置为纵向布局 */
  gap: 0px; /* 调整元素之间的间隔距离 */
  padding: 0%;
  flex-grow: 2;
  background-color: rgb(10, 21, 44);
  height: 10%;
}
.title-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.content-row {
  display: flex;
  gap: 30%; /* 调整元素之间的间隔距离 */
}
.c1 {
  display: flex;
  flex-direction: column;
  gap: 0px; /* 调整元素之间的间隔距离 */
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.font1 {
  color: rgb(247, 250, 253);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 40px;
}
.font2 {
  color: rgb(253, 245, 2);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 40px;
}
</style>
